<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的宠物</title>
		<link rel="stylesheet" href="css/index.css">
		<script src="js/vue.min.js"></script>
		<script src="js/elementui.js"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/mycommon.js"></script>
	</head>
	<body>
		<div id="box1">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item><a href="index.html" target="_top">首页</a></el-breadcrumb-item>
				<el-breadcrumb-item>我的宠物</el-breadcrumb-item>
			</el-breadcrumb>
			<br />
			<fieldset style="border: 1px solid gainsboro;margin-bottom: 4px;">
				<legend><i class="el-icon-search" style="color:#bfb6a3 ;">查询</i></legend>
				<el-form size="mini" :inline="true" :model="formInline" class="demo-form-inline">
					<el-form-item label="标题">
						<el-input v-model="formInline.user" placeholder="标题"></el-input>
					</el-form-item>
		
					<el-form-item>
						<el-button type="primary" @click="onSubmitselect">查询</el-button>
						<el-button type="warning" @click="open">新增宠物</el-button>
					</el-form-item>
				</el-form>
			</fieldset>
			<template style="text-align: center;">
				<el-table :data="tableData" style="width: 100%">
					<el-table-column label="头像">
						<template slot-scope="scope">
							<img :src="scope.row.head" style="width: 100px;height: 100px;" />
						</template>
					</el-table-column>
					<el-table-column prop="name" label="姓名" width="60px">
					</el-table-column>
					<el-table-column prop="sex" label="性别" >
					</el-table-column>
					<el-table-column prop="character" label="性格">
					</el-table-column>
					<el-table-column prop="hobby" label="爱好">
					</el-table-column>
					<el-table-column prop="mount" label="是否上岗">
					</el-table-column>
					<el-table-column prop="master" label="铲屎官">
					</el-table-column>
					<el-table-column prop="vaccine" label="多联疫苗针数" >
					</el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button type="primary" size="mini"
								@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
							<el-button size="mini" type="danger"
								@click="handleDelete(scope.$index, scope.row.id)">删除</el-button>
						</template>
				</el-table>
			</template>
			<el-pagination background layout="prev, pager, next" :total="tocal" :page-size="pagesize"
				@current-change="handleCurrentChange">
			</el-pagination>
			
			<script>
				new Vue({
					el: "#box1",
					data: {
						tableData: [{
							id: '',
							head: '',
							name: '',
							sex: '',
							character: '',
							hobby: '',
							mount: '',
							master: '',
							vaccine: ''
						}],
						formInline: {
							user: ''
						},
						dialogVisibleup: false,
						dialogVisibleadd: false,
						page: 1, //当前第几页
						tocal: 0, //总条数
						pagesize: 4, //总页数
					},
					methods: {
						handleEdit(index, row) {
							
						},
						handle(index, row) {
							
						},
						handleDelete(index, row) {
							
						},
						initdata() {
							var that = this
							//ajax请求后端接口获取json数据
							axios.get(HTTP + "selectAllPet/"+this.page).then(function(res) {
								that.tableData = res.data.data.pageInfo.list
								that.tocal = res.data.data.pageInfo.total
							}).catch(err => {
								console.log(err)
							});
						},
						onSubmitselect() {
			
						},
						open() {
							this.dialogVisibleadd = true
						},
						onSubmitup() {
							
						},
						
						handleCurrentChange(val) { //分页
							this.page = val //舍子当前页
							this.initdata() //发送ajax请求重新获取数据
						}
					},
					mounted() {
						this.initdata();
					}
				})
			</script>
		</div>
	</body>
</html>